<template>
  <el-card class="tag-count-info">
    <tag-content-header search refresh setting @toolFun="toolFun" :settingData="columns">
      <template #title>
        <span>{{ title }}</span>
      </template>
    </tag-content-header>
    <tag-table
      ref="table"
      @refresh="getList"
      :data="dataList"
      :loading="loading"
      :columns="columns"
      :params="params"
      :total="totalSize"
      @rowClick="rowClick"
    >
      <template #assetStatus="{ scope }">
        <span class="circle" :class="{ red: scope.row.assetStatus === 0 }"></span>
        {{ scope.row.assetStatus === 0 ? '下线' : '正常' }}
      </template>
      <template #requirerNnm="{ scope }">
        {{ $name(scope.row, 'requirerNnm', 'requirerNm') }}
      </template>
    </tag-table>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      dataList: [],
      columns: [
        {
          show: true,
          label: '标签名称',
          prop: 'tagNm',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '标签状态',
          prop: 'assetStatus',
          search: true,
          searchKey: '',
          searchType: 'select',
          searchList: [{ key: '正常', value: '1' }, { key: '延期', value: '0' }],
          align: 'center'
        },
        {
          show: true,
          label: '实际上线时间',
          prop: 'actRolloutDt',
          search: true,
          searchKey: '',
          searchType: 'daterange',
          align: 'center'
        },
        {
          show: true,
          label: '提出人',
          prop: 'requirerNnm',
          search: true,
          searchKey: '',
          align: 'center'
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  created() {
    let title = ''
    switch (this.$route.query.type) {
      case 'Total':
        title = '标签总数'
        break
      case 'MonthAdd':
        title = '本月新增'
        break
      case 'MonthOff':
        title = '本月下线'
        break
    }
    this.title = title
    this.getList()
  },
  methods: {
    rowClick(row) {
      if (row.tagId) {
        this.$blank('market-tag', { params: { id: row.tagId } })
      }
    },
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl(`ast/astDataAsset/tag${this.$route.query.type}KpiDetails`),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data.currentPageNum === this.params.currentPageNum) {
            this.dataList = data.data.records
            this.totalSize = data.data.totalSize
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'add':
          this.$refs.catalogEditDrawer.showDrawer({ type: 'add' })
          break
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
      }
    }
  }
}
</script>

<style lang="scss">
.tag-count-info {
  .tag-table .el-table__row {
    cursor: pointer;
  }
}
</style>
